<template>
  <div class="nav_outer">
    <Header>重置密码</Header>
      <div class="white_wrap">
          <div class="loginlabel flex_bet">
              <div></div>
              <!-- <div><a href="javascript:void(0)" @click="navito('login')">登录</a></div> -->
          </div>
          <div class="loginarea">
              <div class="login_phone">
                <img src="../assets/img/login_uicon@2x.png" alt="">
                <div class="login_phoput">
                    <input type="number" placeholder="输入手机号码" v-model="phone">
                </div>
              </div>
              <div class="login_phone">
                <img src="../assets/img/login_vericon@2x.png" alt="">
                <div class="login_phoput">
                    <input type="text" placeholder="输入验证码" v-model="vericode">
                    <button @click="getcode">{{btntext}}</button>
                </div>
              </div>
              <div class="login_phone">
                <img src="../assets/img/pass@2x.png" alt="">
                <div class="login_phoput">
                    <input type="text" placeholder="请设置密码" v-model="password">
                </div>
              </div>
              <div :class="{'login_btn':true,'on':phone && vericode && password}" @click="reset">
                  提交
              </div>
          </div>
          <!-- <div class="wechat_login tcenter">
            <div class="welogin_line"><span>社交账号登录</span></div>
            <p><span class="mui-icon mui-icon-weixin"></span></p>
          </div> -->
      </div>
  </div>
</template>

<script>
import Header from '@/components/commonComponents/Header'
export default {
  data() {
    return {
        phone:'',
        vericode: '',
        password: '',
        getting: false,
        btntext: '发送验证码'
    }
  },
  methods: {
    navito(url){
      this.$router.push({path:url}); 
    },
    getcode(){
        let that = this,timer;
        let REGPhone = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
        if(!REGPhone.test(this.phone)){
            this.mui.toast('手机号有误');
            return
        }
        if(this.getting){
            return
        }
        this.getting = true;
        this.Http.post('/yzj/phone/verify-code-ali', {
            phone: this.phone
        })
        .then((res) => {
            that.btntext = '120s';
            let second = 120;
            timer = setInterval(function(){
                second--;
                if(second<=0){
                    that.getting = false;
                    that.btntext = '获取验证码';
                    clearInterval(timer);
                }else{
                    that.btntext = `${second}s`;
                }
            },1000);
        },(err) => {
            that.mui.toast(err);
            that.getting = false;
        })
    },
    reset(){
        let that=this;
        if(!this.phone || !this.password || !this.vericode){
            return
        }
        let REGPhone = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
        if(!REGPhone.test(this.phone)){
            this.mui.toast('手机号有误');
            return
        }
      this.Http.post('/yzj/reset-password',{
        code: this.vericode,
        phone: this.phone,
        password: this.password
      })
      .then((res) => {
           that.$router.replace('/loginpass');
      })
    }
  },
  components: {
      Header
  }
}
</script>

<style lang='scss' scoped>
    @function px2em($px) {
        @if (unitless($px)) {
        @return px2em($px + 0px);
        } @else if (unit($px) == em) {
        @return $px;
        }
        @return ($px / 75px) * 1rem;
    }
    .white_wrap{
        position: absolute;
        padding: 0 px2em(30);
        width: 100%;
        box-sizing: border-box;
        left: 0;
        top: 1.2rem;
        bottom: 0;
        background: #fff;
    }
    .outer{
        padding: 0 px2em(30);
        background: #fff;
    }
    .header{
        padding: px2em(70) 0;
     }
    .flex_center_colum{
        height: 100%;
        padding: px2em(30);
    }
    .loginlabel{
        margin: px2em(90) px2em(30) 0;
        font-size: 1.2em;
    }
    .loginarea{
        margin: px2em(70);
    }
    .login_phone{
        border-bottom: 1px solid #ccc;
        margin-bottom: px2em(35);
        display:flex;
        align-items: center;
        >img{
            float: left;
            width: px2em(30);
            margin-right: px2em(30);
        }
        >span{
            float: left;
            width: px2em(70);
            text-align: left;
            line-height: px2em(60);
        }
        .login_phoput{
            flex: 1;
            display: flex;
            >input{
                flex: 1;
                margin: 0;
                border: 0;
                background: transparent;
                padding: 0;
            }
            button{
                height: px2em(50);
                line-height: px2em(50);
                border-radius: px2em(25);
                font-size: 12px;
                padding: 0 6px;
                margin-top: 5px;
            }
        }
    }
    .xiyi{
        display: flex;
        input[type='checkbox']{
            background: #fff;
            margin-right: 1em
        }
        >p{
            font-size: 12px;
        }
    }
    .login_btn{
        margin-top: px2em(70);
        height: px2em(80);
        border-radius: px2em(40);
        line-height: px2em(80);
        color: #fff;
        background: #ccc;
        text-align: center;
        &.on{
            background: #5681F3;
        }
    }
    .log_pass{
        color: #333;
        margin-top: px2em(30);
        display: inline-block;
    }
    .loginwarn{
        flex: 1;
        align-items: flex-end;
        justify-content: center;
        display: flex;
        color: #999;
        font-size: 10px;
    }
    .loginlabel{
        >a{
            color: #999;
            display: block;
            margin-bottom: px2em(80);
        }
    }
    .welogin_line{
        border-top: 1px solid #ccc;
        text-align: center;
        margin: px2em(125) px2em(56) px2em(40);
        >span{
            display: inline-block;
            padding: 0 1em;
            background: #fff;
            position: relative;
            top: -0.6em;
            color: #333;
        }
    }
    .mui-icon-weixin{
        color: #fff;
        font-size: 32px;
        display: inline-block;
        width: px2em(88);
        height: px2em(88);
        text-align: center;
        line-height: px2em(88);
        border-radius: 50%;
        background: #39B232;
    }
</style>
